<!-- eslint-disable vue/valid-v-model -->
<template>
  <div>
    <el-card class="box-card">
      <div class="ele-page-header">
        <div class="ele-page-title">支付宝配置</div>
        <div class="ele-page-desc"> 用于支付参数配置 </div>
      </div>
      <div style="margin-top: 30px">
        <el-row :gutter="10"
                type="flex"
                class="row-bg"
                justify="center">
          <el-col :span="12">
            <el-form ref="form"
                     :model="zfbForm"
                     :rules="rules"
                     label-width="100px">

              <el-form-item label="支付宝appid:"
                            label-width="150px"
                            prop="alipay_app_id">
                <el-input clearable
                          :maxlength="100"
                          v-model.trim="zfbForm.alipay_app_id"
                          placeholder="请输入支付宝appid">
                </el-input>
              </el-form-item>

              <el-form-item label="支付宝私钥:"
                            label-width="150px"
                            prop="alipay_merchant_private_key">
                <el-input clearable
                          :maxlength="100"
                          show-password
                          v-model.trim="zfbForm.alipay_merchant_private_key "
                          placeholder="请输入支付宝私钥">
                </el-input>
              </el-form-item>

              <el-form-item label="支付宝公钥 :"
                            label-width="150px"
                            prop="alipay_public_key ">
                <el-input clearable
                          :maxlength="100"
                          show-password
                          v-model.trim="zfbForm.alipay_public_key  "
                          placeholder="请输入支付宝公钥 ">
                </el-input>
              </el-form-item>

            </el-form>
          </el-col>
        </el-row>
      </div>
      <div class="ele-page-header">
        <div class="ele-page-title">微信配置</div>
        <div class="ele-page-desc"> 用于支付参数配置 </div>
      </div>

      <div style="margin-top: 30px">
        <el-row :gutter="10"
                type="flex"
                class="row-bg"
                justify="center">
          <el-col :span="12">
            <el-form ref="form"
                     :model="pay_type=='1'?form:form1"
                     :rules="rules"
                     label-width="100px">
              <el-form-item label="支付类型:"
                            label-width="150px"
                            prop="pay_type">
                <el-radio-group @input="selectRadio"
                                v-model.trim="pay_type">
                  <el-radio label="1"
                            value="1">微信支付</el-radio>
                  <el-radio label="2"
                            value="2">微信服务商支付</el-radio>

                </el-radio-group>

              </el-form-item>

              <div v-if="pay_type=='1'">
                <el-form-item label="公众号appid:"
                              label-width="150px"
                              prop="appid">
                  <el-input clearable
                            :maxlength="100"
                            v-model.trim="form.appid"
                            placeholder="请输入公众号appid">
                  </el-input>
                </el-form-item>

                <el-form-item label="公众号appsecret:"
                              label-width="150px"
                              prop="appSecret">
                  <el-input clearable
                            :maxlength="100"
                            show-password
                            v-model.trim="form.appSecret"
                            placeholder="请输入公众号appsecret">
                  </el-input>
                </el-form-item>

                <el-form-item label="支付商户号:"
                              label-width="150px"
                              prop="mch_id">
                  <el-input clearable
                            v-model.trim="form.mch_id"
                            placeholder="请输入支付商户号" />
                </el-form-item>

                <el-form-item label="apikey(V3):"
                              label-width="150px"
                              prop="apikey">
                  <el-input clearable
                            show-password
                            v-model.trim="form.apikey"
                            placeholder="请输入apikey(V3)" />
                </el-form-item>
                <el-form-item label="apikey(V2):"
                              label-width="150px"
                              prop="apikey2">
                  <el-input clearable
                            show-password
                            v-model.trim="form.apikey2"
                            placeholder="请输入apikey(V2)" />
                </el-form-item>
                <!-- <el-form-item label="打款类型:"
								label-width="150px"
								prop="name">
					<el-radio-group v-model.trim="form.transfer_type">
				 
					  <el-radio label="1"
								value="1">企业付款到微信</el-radio>
					  <el-radio label="2"
								value="2">商家转账到零钱</el-radio>
					</el-radio-group>
				  </el-form-item> -->
                <el-form-item label="证书序列号:"
                              label-width="150px"
                              prop="serial_number">
                  <el-input clearable
                            v-model.trim="form.serial_number"
                            placeholder="请输入微信证书序列号" />

                </el-form-item>
                <el-form-item label="cert文件:"
                              label-width="150px"
                              prop="cert">
                  <el-upload class="upload-demo"
                             drag
                             :limit="1"
                             :on-exceed="exceedFn"
                             :auto-upload="false"
                             :file-list='fileWxzfCertList'
                             :on-remove="(e)=>handleRemove(e,'fileWxzfCertList')"
                             :on-change="
						(files, fileList) =>
						  handleFileChange(
							files,
							fileList,
							'cret_file'
						  )
					  "
                             action="#">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip"
                         slot="tip">只能上传cert/pem文件，且不超过500kb</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="key文件:"
                              label-width="150px"
                              prop="key">
                  <el-upload class="upload-demo"
                             drag
                             :limit="1"
                             :file-list='fileWxzfKeyList'
                             :on-exceed="exceedFn1"
                             :on-remove="(e)=>handleRemove2(e,'fileWxzfKeyList')"
                             :auto-upload="false"
                             :on-change="
						(files, fileList) =>
						  handleFileChange(
							files,
							fileList,
							'key_file'
						  )
					  "
                             action="#"
                             multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip"
                         slot="tip">只能上传cert/key文件，且不超过500kb</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label-width="150px"
                              label="">
                  <el-button type="primary"
                             :loading="loading"
                             @click="save">
                    保存更改
                  </el-button>
                </el-form-item>
              </div>
              <div v-if="pay_type=='2'">
                <el-form-item label="商户号"
                              label-width="150px"
                              prop="sp_mchid">
                  <el-input clearable
                            v-model.trim="form1.sp_mchid"
                            placeholder="请输入商户号" />
                </el-form-item>
                <el-form-item label="商户appId:"
                              label-width="150px"
                              prop="m_mch_id">
                  <el-input clearable
                            v-model.trim="form1.sp_appid"
                            placeholder="请输入商户appId" />
                </el-form-item>
                <el-form-item label="子商户appID:"
                              label-width="150px"
                              prop="m_appid">
                  <el-input clearable
                            :maxlength="100"
                            v-model.trim="form1.m_appid"
                            placeholder="请输入子商户appID">
                  </el-input>
                </el-form-item>
                <!-- <el-form-item label="公众号appid:"
								label-width="150px"
								prop="m_appid">
					<el-input clearable
							  :maxlength="100"
							  v-model.trim="form1.m_appid"
							  placeholder="请输入公众号appid">
					</el-input>
				  </el-form-item> -->
                <el-form-item label="v2密钥:"
                              label-width="150px"
                              prop="s_apikey2">
                  <el-input clearable
                            :maxlength="100"
                            v-model.trim="form1.s_apikey2"
                            placeholder="请输入v2密钥">
                  </el-input>
                </el-form-item>
                <el-form-item label="公众号appsecret:"
                              label-width="150px"
                              prop="appSecret">
                  <el-input clearable
                            :maxlength="100"
                            show-password
                            v-model.trim="form.appSecret"
                            placeholder="请输入公众号appsecret">
                  </el-input>
                </el-form-item>

                <el-form-item label="子商户号:"
                              label-width="150px"
                              prop="m_mch_id">
                  <el-input clearable
                            v-model.trim="form1.m_mch_id"
                            placeholder="请输入子商户号" />
                </el-form-item>

                <el-form-item label="支付v3密钥:"
                              label-width="150px"
                              prop="m_apikey">
                  <el-input clearable
                            show-password
                            @change="(e) => filterText(e, 'wxServiceForm')"
                            v-model.trim="form1.m_apikey"
                            placeholder="请输入支付v3密钥" />
                </el-form-item>

                <!-- <el-form-item label="打款类型:"
								label-width="150px"
								prop="name">
					<el-radio-group v-model.trim="form1.m_transfer_type">
				   
					  <el-radio label="1"
								value="1">企业付款到微信</el-radio>
					  <el-radio label="2"
								value="2">商家转账到零钱</el-radio>
					</el-radio-group>
				  </el-form-item> -->
                <el-form-item label="证书序列号:"
                              label-width="150px"
                              prop="m_serial_number">
                  <el-input clearable
                            v-model.trim="form1.m_serial_number"
                            placeholder="请输入微信证书序列号" />

                </el-form-item>
                <el-form-item label="cert文件:"
                              label-width="150px"
                              prop="cert">
                  <el-upload class="upload-demo"
                             drag
                             :limit="1"
                             :on-exceed="exceedFn"
                             :auto-upload="false"
                             :file-list='m_fileWxzfCertList'
                             :on-remove="(e)=>handleRemove(e,'m_fileWxzfCertList')"
                             :on-change="
						(files, fileList) =>
						  handleFileChange(
							files,
							fileList,
							'm_cret_file'
						  )
					  "
                             action="#">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip"
                         slot="tip">只能上传cert/pem文件，且不超过500kb</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="key文件:"
                              label-width="150px"
                              prop="key">
                  <el-upload class="upload-demo"
                             drag
                             :limit="1"
                             :file-list='m_fileWxzfKeyList'
                             :on-exceed="exceedFn1"
                             :on-remove="(e)=>handleRemove2(e,'m_fileWxzfKeyList')"
                             :auto-upload="false"
                             :on-change="
						(files, fileList) =>
						  handleFileChange(
							files,
							fileList,
							'm_key_file'
						  )
					  "
                             action="#"
                             multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip"
                         slot="tip">只能上传cert/key文件，且不超过500kb</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label-width="150px"
                              label="">
                  <el-button type="primary"
                             :loading="loading"
                             @click="save">
                    保存更改
                  </el-button>
                </el-form-item>
              </div>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
	<script>

import { upload } from '@/api/saveImg/index'
// import { getToken } from '@/utils/token-util';
import { config, configEdit } from '@/api/config/index'
// import {
//   userOssSignature,
//   qnyOssSignature
// } from '@/api/creatCenter/material';
// import axios from 'axios';
export default {
  name: 'RoleEdit',
  components: {},
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data () {
    const DEFAULT_FORM = {


      // 微信公众号appid
      appid: '',
      // 微信公众号appsecret
      appSecret: '',
      // 微信商户号
      mch_id: '',
      //   transfer_type: '2',
      // 微信支付密钥

      apikey: '',
      apikey2: '',
      // 微信支付证书序列号
      serial_number: '',
      //微信支付cert(证书)文件
      cret_file: '',
      // 微信支付key文件
      key_file: '',




    };
    const DEFAULT_FORM1 = {


      // 微信公众号appid
      m_appid: '',
      // 微信公众号appsecret
      //   m_appSecret: '',
      // 微信商户号
      m_mch_id: '',
      //   m_transfer_type: '2',
      // 微信支付密钥

      m_apikey: '',

      // 微信支付证书序列号
      m_serial_number: '',
      //微信支付cert(证书)文件
      m_cret_file: '',
      // 微信支付key文件
      m_key_file: '',
      //  服务商应用id
      sp_appid: '',
      //  服务商户号
      sp_mchid: '',
      s_apikey2: ''




    };
    return {

      pay_type: '1',
      options: [],
      images: [],
      showEdit: false,
      isUpdata: false,
      // 表单数据
      form: { ...DEFAULT_FORM },
      form1: { ...DEFAULT_FORM1 },
      formArr: [],
      // 日期范围输入
      dateRange: [],
      zfbForm: {
        alipay_app_id: '',
        alipay_merchant_private_key: '',
        alipay_public_key: ''
      },
      fileWxzfCertList: [],
      fileFwsfCertList: [],
      fileWxzfKeyList: [],
      m_fileWxzfCertList: [],
      fileFwsfKeyList: [],
      m_fileWxzfKeyList: [],
      // 表单验证规则
      rules: {

      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      showChoose: false
    };
  },
  activated () {
    this.querys();
  },
  methods: {
    /* 保存编辑 */
    querys (typess) {
      // 查询回显
      config({

      })
        .then((msg) => {
          console.log(msg);
          if (msg) {
            //   是修改


            if (!typess) {
              this.pay_type = msg.data.pay_type
            }

            this.isUpdata = true;

            this.$nextTick(() => {
              if (this.pay_type == '1') {
                this.$util.assignObject(this.form, {
                  ...msg.data
                });
              } else {
                this.$util.assignObject(this.form1, {
                  ...msg.data
                });
                this.form.appSecret = msg.data.appSecret
              }
              this.$util.assignObject(this.zfbForm, {
                ...msg.data
              });

              if (this.pay_type == '1') {
                if (msg.data.cret_file) {
                  this.fileWxzfCertList = [{ name: msg.data.cret_file, url: msg.data.cret_file }]
                }
                //   fileFwsfCertList:[],
                if (msg.data.key_file) {
                  this.fileWxzfKeyList = [{ name: msg.data.key_file, url: msg.data.key_file }]
                }
              } else {
                if (msg.data.m_cret_file) {
                  this.m_fileWxzfCertList = [{ name: msg.data.m_cret_file, url: msg.data.m_cret_file }]
                }
                //   fileFwsfCertList:[],
                if (msg.data.m_key_file) {
                  this.m_fileWxzfKeyList = [{ name: msg.data.m_key_file, url: msg.data.m_key_file }]
                }
              }
            })




          } else {
            // 修改
            this.isUpdata = false;
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    exceedFn () {
      this.$message({
        message: '图片上传已达到上限,请删除后再上传',
        type: 'warning'
      });
      console.log('exceedFn')
    },
    exceedFn1 () {
      this.$message({
        message: '图片上传已达到上限,请删除后再上传',
        type: 'warning'
      });
      console.log('exceedFn1')
    },
    async handleFileChange (file, fileList, name) {
      console.log(file, fileList, name)


      let files = file.raw;

      console.log(files)
      // 构建请求参数
      let params = new FormData();
      console.log(params);

      params.append('file', files);
      console.log(params);

      const res = await upload(params);

      console.log(res);
      if (res.code == 0) {
        if (name == 'cret_file') {
          this.form.cret_file = res.data.url
        } else if (name == 'key_file') {
          this.form.key_file = res.data.url
        } else if (name == 'm_key_file') {
          this.form1.m_key_file = res.data.url
        } else if (name == 'm_cret_file') {
          this.form1.m_cret_file = res.data.url
        }
      }

    },
    // 过滤文本
    filterText (e, form) {

      let privateKey = e.trim()
      let privateKeyPath = privateKey.replace(/^-----BEGIN PRIVATE KEY-----/, "").replace(/-----END PRIVATE KEY-----$/, "")
      console.log(privateKeyPath)
      if (form == 'wxForm') {
        this.form.fwsPrivateKey = privateKeyPath.trim();
      } else if (form == 'wxServiceForm') {
        this.form.apikey = privateKeyPath.trim();
      }

    },
    handleRemove (e, type) {
      // this.e=[]
      console.log(e, type)
      console.log(this[type])

      this[type] = []

      if (this.pay_type == '1') {
        this.form.cret_file = '';
      } else {
        this.form1.m_cret_file = '';
      }


    },
    handleRemove2 (e, type) {

      console.log(e, type)
      console.log(this[type])
      this[type] = []


      if (this.pay_type == '1') {
        this.form.key_file = '';
      } else {
        this.form1.m_key_file = '';
      }
    },
    selectRadio () {
      this.querys(true)
    },
    save () {
      this.$refs['form'].validate((valid, obj) => {
        if (valid) {
          let data
          if (this.pay_type == '1') {
            data = {
              ...this.form,
              pay_type: this.pay_type,
              ...this.zfbForm

            };
          } else {
            data = {
              ...this.form1,
              pay_type: this.pay_type

            };
          }
          console.log(data, this.isUpdata);

          configEdit(data)
            .then(() => {
              this.loading = false;
              this.querys();
              this.$message.success('提交成功！');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
          return false;
        }
      });
    },
    addFoods () { },
    /* 更新visible */
    handleClose () {
      this.$emit('update:visible', false);
    }
  },
  watch: {
    visible (visible) {
      if (visible) {
        if (this.data) {
          this.$util.assignObject(this.form, this.data);
          this.isUpdate = true;
        } else {
          this.isUpdate = false;
        }
      } else {
        this.$refs['form'].clearValidate();
        // this.form = { ...DEFAULT_FORM };
      }
    }
  }
};
	</script>
	<style lang="less" scoped>
.headerStyle {
  color: gray;

  margin-top: 5px;
}
</style>
	